<template>
  <div class="academy">
    <div class="title">院校信息管理</div>
    <el-card class="el_card">
       <div>
          <!-- 院校列表头部标题 -->
          <div class="academy_top">
            <!-- 左侧 -->
            <div class="academy_top_left">
              <div>院校列表</div>
            </div>
            <!-- 右侧 -->
            <div class="academy_top_right">
              <el-button type="primary" class="import">批量导入</el-button>
              <el-button type="primary" class="new_add" @click="changToAdd">新增</el-button>
            </div>
          </div>
          <!-- 学校查询 -->
          <el-form  
            class="demo-form-inline" 
            :inline="true" 
            :model="formInline"
            ref="queryRuleFormRef"
            :rules="queryRules"
            :show-message="false"
          >
                <el-row :gutter="24">
                  <el-col :span="4">
                    <el-form-item label="学校：" prop="school">
                      <el-input v-model="formInline.school" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item label="省份/直辖市：" prop="province">
                      <el-input  v-model="formInline.province"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item label="办学层次：" prop="level">
                      <el-input  v-model="formInline.level"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item label="学校类别：" prop="category">
                      <el-input  v-model="formInline.category"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4"></el-col>
                  <el-col :span="4"> 
                    <el-form-item>
                      <el-button type="success" @click="onQuerySubmit(queryRuleFormRef, getAllData)" style="width:80px;background:#27B148">查询</el-button>
                    </el-form-item>
                  </el-col>
                </el-row> 

                <el-row :gutter="24" class="row_two">
                  <el-col :span="8">
                    <el-form-item label="学校性质：">
                      <el-checkbox-group v-model="formInline.checkedNature" :max="1">
                        <el-checkbox  v-for="item,index in nature" :key="index" :label="item" size="large">{{item}}</el-checkbox>
                      </el-checkbox-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="16">
                    <el-form-item label="学校特色：" >
                      <el-checkbox-group v-model="formInline.checkedSpelice" :max="1">
                        <el-checkbox v-for="item,index in spelice" :key="index" :label="item" size="large" />
                      </el-checkbox-group>
                    </el-form-item>
                  </el-col>
                </el-row>

          </el-form>

          <!-- table表格 -->
          <el-table
            ref="multipleTableRef"
            :data="tableData"
            style="width: 100%;"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column property="name" label="学校"  />
              <!-- <template #default="scope">{{ scope.row.date }}</template> -->
            <el-table-column property="provice" label="省份/直辖市"  />
            <el-table-column property="batch" label="办学层次"/>
            <el-table-column property="nature" label="学校性质" />
            <el-table-column property="especially" label="学校特色"  />
            <el-table-column property="category" label="学校类别" />
            <el-table-column property="name" label="详细信息">
              <template #default="scope">
                <el-button type="success" style="background:#27B148;width:65px;height: 28px;" @click="checkInfo(scope.row)">查看</el-button>
              </template>
            </el-table-column>
            <el-table-column property="name" label="操作" width="280">
              <template #default="scope">
                <el-button type="primary" style="width:65px;height: 28px;" @click="handleEdit(scope.row)">编辑</el-button>
                <el-popconfirm 
                    title="是否删除?"
                    confirm-button-text="是"
                    cancel-button-text="否"
                    :icon="InfoFilled"
                    icon-color="#626AEF"
                    @confirm="handleDel(getAllData,scope.row)"
                >
                    <template #reference>
                      <el-button type="danger" style="width:65px;height: 28px;">删除</el-button>
                    </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>

          <!-- 批量删除 -->
          <div class="del" @click="delBtn(getAllData)">
            <p>批量删除</p>
          </div>

          <!-- 底部分页 -->
          <!-- page-size 每页显示条数 -->
          <div class="academy_bottom">
            <el-pagination 
              background 
              layout="prev, pager, next" 
              size:small 
              :total="total"
              v-model:page-size="params.pagesize"
              v-model:current-page="params.pagenum"
              @current-change="changePage"
            />
          </div>
       </div>
    </el-card>
  
    <!-- 查看对话框 -->
    <el-dialog v-model="dialogFormVisible" title="查看详细信息">
        <el-form :model="checkInfoData" class="checkInfo">
          <el-form-item label="学校名称:" :label-width="formLabelWidth">
            <p>{{checkInfoData.name}}</p>
          </el-form-item>
          <el-form-item label="学校logo:" :label-width="formLabelWidth">
            <el-image :src="checkInfoData.sc_img" :fit="cover" style="width: 40px; height: 40px"></el-image>
          </el-form-item>
          <el-form-item label="办学层次:" :label-width="formLabelWidth">
            <p>{{checkInfoData.batch}}</p>
          </el-form-item>
          <el-form-item label="学校性质:" :label-width="formLabelWidth">
            <p>{{checkInfoData.nature}}</p>
          </el-form-item>
          <el-form-item label="学校特色:" :label-width="formLabelWidth">
            <p>{{checkInfoData.especially}}</p>
          </el-form-item>
          <el-form-item label="学校类别:" :label-width="formLabelWidth">
            <p>{{checkInfoData.category}}</p>
          </el-form-item>
        </el-form>
        <el-form :model="checkInfoData" class="checkInfo">
          <el-form-item label="省份/直辖市:" :label-width="formLabelWidth">
            <p>{{checkInfoData.provice}}</p>
          </el-form-item>
          <el-form-item label="办学年份:" :label-width="formLabelWidth">
            <p>{{checkInfoData.year}}</p>
          </el-form-item>   
          <el-form-item label="学校介绍:" :label-width="formLabelWidth">
            <p>{{checkInfoData.introduction}}</p>
          </el-form-item>
          <el-form-item label="学校地址:" :label-width="formLabelWidth">
            <p>{{checkInfoData.address}}</p>
          </el-form-item>
          <el-form-item label="学校电话:" :label-width="formLabelWidth">
            <p>{{checkInfoData.Telephone}}</p>
          </el-form-item>
          <el-form-item label="学校邮箱:" :label-width="formLabelWidth">
            <p>{{checkInfoData.mailbox}}</p>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer"></span>
        </template>
    </el-dialog>

    <!-- 编辑对话框 -->
    <el-dialog v-model="dialogEditVisible" title="编辑信息" @close="closeDialog(ruleFormRef)" class="editDialog">
        <el-form 
        :model="editInfoData"
        ref="ruleFormRef"
        :rules="rule"
        hide-required-asterisk
        status-icon
        class="checkInfo"
        >
          <el-form-item label="学校名称:" :label-width="formLabelWidth" prop="name">
            <el-input v-model="editInfoData.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="学校性质:" :label-width="formLabelWidth" prop="nature">
            <el-checkbox-group v-model="checkedNatures"  :max="1">
                <el-checkbox v-for="(item,index) in nature" :key="index" :label="item" name="nature">{{item}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="学校特色:" :label-width="formLabelWidth" prop="spelice">
            <el-checkbox-group v-model="checkedEspecially"  :max="1">
                <el-checkbox v-for="(item,index) in spelice" :key="index" :label="item" name="spelice">{{item}}</el-checkbox>
            </el-checkbox-group>
            <!-- <el-input v-model="editInfoData.especially" autocomplete="off" /> -->
          </el-form-item>
          <el-form-item label="学校类别:" :label-width="formLabelWidth" prop="category">
            <el-checkbox-group v-model="checkedCategory"  :max="1">
                <el-checkbox v-for="(item,index) in category" :key="index" :label="item" name="category">{{item}}</el-checkbox>
            </el-checkbox-group>
            <!-- <el-input v-model="editInfoData.category" autocomplete="off" /> -->
          </el-form-item>
        </el-form>
        <el-form  
          :model="editInfoData"
          ref="ruleFormRef"
          :rules="rule"
          status-icon
          hide-required-asterisk
          class="checkInfo"
          >
          <el-form-item label="学校logo:" :label-width="formLabelWidth">
            <el-image :src="editInfoData.sc_img" :fit="cover" style="width: 50px; height: 50px"></el-image>
          </el-form-item>
          <el-form-item label="办学层次:" :label-width="formLabelWidth" prop="batch">
            <el-input v-model="editInfoData.batch" autocomplete="off" />
          </el-form-item>
          <el-form-item label="省份/直辖市:" :label-width="formLabelWidth" prop="provice">
            <el-input v-model="editInfoData.provice" autocomplete="off" />
          </el-form-item>
          <el-form-item label="学校介绍:" :label-width="formLabelWidth" prop="introduction">
            <el-input v-model="editInfoData.introduction" autocomplete="off" />
          </el-form-item>
          <el-form-item label="学校地址:" :label-width="formLabelWidth" prop="address">
            <el-input v-model="editInfoData.address" autocomplete="off" />
          </el-form-item>
          <el-form-item label="学校电话:" :label-width="formLabelWidth" prop="Telephone" >
            <el-input v-model="editInfoData.Telephone" autocomplete="off" maxlength="11"/>
          </el-form-item>
        </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="resetForm(ruleFormRef)">取消</el-button>
          <el-button type="primary" @click="editConfrimBtn(ruleFormRef,getAllData)">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>


<script>
import { reactive, toRefs, unref, ref, onMounted, onUpdated } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { getList, getQueryList, editList, deletList }  from '@/api/axiosPlus.js'
import { InfoFilled } from '@element-plus/icons-vue'

// 请求所有数据
function useGetAlldata () {
  let data = reactive({
    tableData:[],
    total: 0,
    params: {
      pagenum: 1,
      pagesize: 4
    },
  })
  const getAllData = async (queryData=[]) => {
    const res = await getList({
      params: data.params
    })
    if(res.status !== 200 ) return console.log('获取数据失败')
    console.log(queryData,queryData.length);
    if(queryData.length === 0) {
      data.tableData = res.result 
      data.total = res.total
    } else {
      data.tableData = queryData
    }
    console.log(res,data.tableData);
  }
  
  // 分页点击事件
  const changePage = (val) => {
    data.params.pagenum = val
    // console.log(val,data.params.pagenum);
    getAllData()
  }

  return {
    ...toRefs(data),
    getAllData,
    changePage
  }
}

// 查看
function useCheckInfo () {
    const dialogTableVisible = ref(false)
    const dialogFormVisible = ref(false)
    const formLabelWidth = '140px'
    let checkSchool = reactive({checkInfoData: {}})
    const checkInfo = (row) => {
      // console.log(row);
      dialogFormVisible.value = true
      checkSchool.checkInfoData = row
      console.log(checkSchool);
    }

    return {
      dialogTableVisible,
      dialogFormVisible,
      formLabelWidth,
      checkInfo,
       ...toRefs(checkSchool),
    }
}

// 编辑
function useEditInfo () {
  const dialogEditVisible = ref(false)
  let editInfo = reactive({editInfoData: {}})
  const checkedNatures = ref([])
  const checkedEspecially = ref([])
  const checkedCategory = ref([])
  const handleEdit = (row) => {
    dialogEditVisible.value = true
    console.log(row);
    let data = {
          name: row.name,
          provice: row.provice,
          batch: row.batch,
          category: row.category,
          nature: row.nature,
          especially: row.especially,
          id: row.sc_id,
          sc_img: row.sc_img,
          address: row.address,
          introduction: row.introduction,
          Telephone: row.Telephone
        }
    editInfo.editInfoData = data
    console.log(editInfo.editInfoData);
    checkedNatures.value.push(data.nature)
    checkedEspecially.value.push(data.especially)
    checkedCategory.value.push(data.category)
    // let checkedNatures  = ref([data.nature])
    console.log(checkedNatures);
  }
  const ruleFormRef = ref()
  
  const telephoePass = (rule, value, callback) => {
      const reg = /^1[3456789]\d{9}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$/
      if (!reg.test(value)) {
          callback(new Error('请输入正确电话格式'))
      }else {
          callback()
      }
  }

  const rule = reactive({
    name:[
      {required: true, message: '大学名称不能为空', trigger: 'blur'}
    ],
    provice:[
      {required: true, message: '省份/直辖市不能为空', trigger: 'blur'}
    ],
    batch:[
      {required: true, message: '办学层次不能为空', trigger: 'blur'}
    ],
    nature:[
      {required: true, message: '学校性质不能为空', trigger: 'blur'}
    ],
    especially:[
      {required: true, message: '学校特色不能为空', trigger: 'blur'}
    ],
    category:[
      {required: true, message: '学校类别不能为空', trigger: 'blur'}
    ],
     provice:[
      {required: true, message: '学校省份/直辖市不能为空', trigger: 'blur'}
    ],
    //  nature:[
    //   {required: true, type: 'array', message: '请选择学校性质', trigger: 'blur'}
    // ],
    //  introduction:[
    //   {required: true, message: '学校类别不能为空', trigger: 'blur'}
    // ],
    Telephone:[
      // {trigger: 'blur'},
      {validator: telephoePass, trigger: 'change' }
    ]
  })
  const router = useRouter()

  // 确定按钮
  const editConfrimBtn = async (formEl,callback) => {
    console.log(formEl,callback)
    if(!formEl) return
    await formEl.validate(async (valid,fields) => {
      console.log(valid,fields);
      if (valid) {
        // console.log("submit");
        // 更新学校性质数据
        // console.log(checkedNatures,unref(checkedNatures))
        // console.log(checkedNatures[0],unref(checkedNatures)[0])
        editInfo.editInfoData.nature = unref(checkedNatures)[0]
        editInfo.editInfoData.especially = unref(checkedEspecially)[0]
        editInfo.editInfoData.category = unref(checkedCategory)[0]
        console.log(editInfo.editInfoData);
        let pamas = editInfo.editInfoData

        // 请求编辑
        let res = await editList(pamas)
        console.log(res)
        dialogEditVisible.value = false
        // router.push('/academy')
        if (res.status !== 200) return ElMessage({
          message: '修改失败',
          type: 'error',
        })
        callback()
        ElMessage({
          message: '修改成功',
          type: 'success',
        })
      } else {
        ElMessage({
          message: '请输入正确值！',
          type: 'warning',
        })
        console.log('请输入正确值', fields)
      }
    })
  }

  // 取消按钮
  const resetForm = (formEl) => {
  if (!formEl) return
    dialogEditVisible.value = false
    checkedNatures.value.length = 0
    checkedEspecially.value.length = 0
    checkedCategory.value.length = 0
    formEl.resetFields()
  }

// 对话框关闭提示语消失
  const closeDialog = (formEl) => {
    if (!formEl) return
    dialogEditVisible.value = false
    checkedNatures.value.length = 0
    checkedEspecially.value.length = 0
    checkedCategory.value.length = 0
    formEl.resetFields()
  }

  return {
    dialogEditVisible,
    handleEdit,
    editConfrimBtn,
    ruleFormRef,
    rule,
    ...toRefs(editInfo),
    resetForm,
    closeDialog,
    checkedNatures,
    checkedEspecially,
    checkedCategory
  }
}

// 查询学校信息
function useQuery () {
  // 校验条件设置
  const schoolPass = (rule, value, callback) => {
    if (value === '') {
      callback(new Error('Please input the password again'))
    }else {
      callback()
    }
  }
  const provincePass = (rule, value, callback) => {
    if (value === '') {
      callback(new Error('Please input the password again'))
    }else {
      callback()
    }
  }
  const levelPass = (rule, value, callback) => {
    if (value === '') {
      callback(new Error('Please input the password again'))
    }else {
      callback()
    }
  }
  const categoryPass = (rule, value, callback) => {
    if (value === '') {
      callback(new Error('Please input the password again'))
    }else {
      callback()
    }
  }

  const queryRuleFormRef = ref()  // 获取查询表单节点
  const formData = reactive({
    formInline: {
      school:"",
      province:"",
      level:"",
      category:"",
      checkedSpelice: [],
      checkedNature : []
    },
    nature: [ "不限", "公办", "民办" ],
    spelice: ["985","211","双一流"],
    category: ['综合类', '理工类', '农业类', '医药类','林业类','财经类','政法类','民族类','师范类','语言类','艺术类','体育类','无/不限制类别'],
    queryRules: {
      school: [{ validator: schoolPass, trigger: 'change' }],
      province: [{ validator: provincePass, trigger: 'change' }],
      level: [{ validator: levelPass, trigger: 'change' }],
      category: [{ validator: categoryPass, trigger: 'change' }],
    }
  })

  // const nature = [ "不限", "公办", "民办" ]
  
  // 获取复选框所选值
  // const changeCheck = (e) => {
  //   console.log(e); // 当前点击的复选框状态
  //   console.log('学校性质：',formData.formInline.checkedNature);
  // }

  // 查询按钮
  const onQuerySubmit = (queryRuleFormRef, callback) => {
    if (!queryRuleFormRef) return

    // validate() 对整个表单的内容进行验证  
      //  第一个参数  valid --- 表单验证最终状态  所有通过校验为true  否则false
      //  第二个参数  val --- 一个对象  对象属性为没有通过校验的节点（属性名：节点prop属性值，属性值：校验条件设置抛出的错误提示等信息）
    queryRuleFormRef.validate(async (valid,val) => {
      if (valid) {
        // 校验成功
        console.log('submit!')

        console.log(formData.formInline) // 用户填写的查询条件
        // 发送查询请求
        const res = await getQueryList({
          name: formData.formInline.school,
          provice: formData.formInline.province,
          batch: formData.formInline.level,
          category: formData.formInline.category,
          nature: formData.formInline.checkedNature[0],
          especially: formData.formInline.checkedSpelice[0]
        })
        queryRuleFormRef.resetFields() // 表单重置
        formData.formInline.checkedNature = []  // 多选框重置
        formData.formInline.checkedSpelice = []  // 多选框重置

        console.log(res);
        // 未查询到数据提示
        if(res.data.length === 0) ElMessage({
          message: '暂无查询信息！',
          type: 'warning',
          duration: 2000
        })

        // 查询到数据 利用getAllData，更新tableData数据，使视图响应更新展示数据
        callback(res.data)

      } else {
        // 校验不通过 （有不符合校验条件的节点---input)
        console.log('error submit !')
        console.log(val,formData.formInline);
        // Object.getOwnPropertyNames()  获取可枚举和不可枚举属性
            // 返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括Symbol值作为名称的属性）组成的数组
        // 得到不符合校验条件节点数量
        console.log(Object.getOwnPropertyNames(val),Object.getOwnPropertyNames(val).length);

        // 当用户没有填写任何查询条件时 清空表单验证，提示用户，获取所有数据并渲染
        if(Object.getOwnPropertyNames(val).length === 4 && formData.formInline.checkedNature.length === 0 && formData.formInline.checkedSpelice.length === 0) {
          callback()
          setTimeout(() => {
            queryRuleFormRef.resetFields()
          },2000)
          ElMessage({
            message: '至少要输入一个查询条件！',
            type: 'warning',
            duration: 3000
          })
        } else {
        // 当用户填写任意一个查询条件时 发送查询请求
          console.log(formData.formInline)
          const res = await getQueryList({
            name: formData.formInline.school,
            provice: formData.formInline.province,
            batch: formData.formInline.level,
            category: formData.formInline.category,
            nature: formData.formInline.checkedNature[0],
            especially: formData.formInline.checkedSpelice[0]
          })
          queryRuleFormRef.resetFields()
          formData.formInline.checkedNature = []
          formData.formInline.checkedSpelice = []

          console.log(res);
          if(res.data.length === 0) {
            ElMessage({
              message: '暂无查询信息！',
              type: 'warning',
              duration: 2000
            })
          } else {
            ElMessage({
              message: '查询成功',
              type: 'success',
              duration: 2000
            })
          }

          callback(res.data)
        }

        return false
      }
    })
  }

  return {
    onQuerySubmit,
    // changeCheck,
    ...toRefs(formData),
    queryRuleFormRef
  }
}

// 删除学校信息
function useDelete() {
  // 删除
  const handleDel = async (callback, row) => {
    const id = row.sc_id+''   // toString(row.sc_id)
    const res = await deletList({
      params: {
        id
      }
    })
    console.log(res);
    callback()
    ElMessage({
            message: '删除成功！',
            type: 'success',
            duration: 2000
    })
  }

  // table selection 多选
  let tableSelection = []
  // 获取table选中数据
  const handleSelectionChange = (val) => {
    console.log(val)
    // 找到sc_id并存在数组里面
    tableSelection = val.map(v => v.sc_id)
    console.log(tableSelection);
  }

  // 批量删除
  const delBtn = async (callback) => {
    console.log('批量删除');
    // 用逗号拼接
    const idArr = tableSelection.join(',')
    if (!idArr)  return ElMessage({
      message: '请选择需要删除的数据！',
      type: 'warning',
    })

    const res = await deletList({
      params: {
        id: idArr
      }
    })
    console.log(res);
    callback()
    ElMessage({
            message: '删除成功！',
            type: 'success',
            duration: 2000
          })
  }

  return {
    handleDel,
    delBtn,
    handleSelectionChange
  }
}

export default {
  components: {},
  setup() {
    const { tableData, params, total, getAllData, changePage } = useGetAlldata()  // 请求所有数据
    const { checkInfoData, dialogTableVisible, dialogFormVisible, formLabelWidth, checkInfo } = useCheckInfo()  //查看信息
    // 编辑
    const { dialogEditVisible, handleEdit, editConfrimBtn, ruleFormRef, rule, editInfoData, resetForm , closeDialog, checkedNatures, checkedEspecially, checkedCategory} = useEditInfo()
    const { onQuerySubmit, formInline, nature, spelice, category, queryRuleFormRef, queryRules } = useQuery()  //查询
    const { handleDel, delBtn, handleSelectionChange } = useDelete() //删除

    getAllData()
    

    // 新增按钮路由跳转
    const router = useRouter()
    const changToAdd = () => {
      router.push('/academy/add')
    }


    return {
      // checkedNature,
      // changeCheck,
      handleSelectionChange,
      // checkedSpelice,
      tableData,
      params,
      total,
      changePage, 
      getAllData,
      changToAdd,
      delBtn,

      // 查看信息
      dialogTableVisible,
      dialogFormVisible,
      formLabelWidth,
      checkInfo,
      checkInfoData,

      // 编辑
      dialogEditVisible,
      handleEdit,
      editConfrimBtn,
      ruleFormRef,
      rule,
      editInfoData,
      resetForm,
      closeDialog,
      checkedNatures,
      checkedEspecially,
      checkedCategory,
      // 删除
      handleDel,
      delBtn,

      // 查询
      onQuerySubmit,
      nature,
      spelice,
      category,
      formInline,
      InfoFilled,
      // changeCheck,
      queryRules,
      queryRuleFormRef
      // useGetAlldata,
      // useQuery,

    }
  }
}
</script>

<style lang="less" scoped>
.academy{
  .title {
    font-size: 18px;
    text-align: left;
  }
  .el_card {
    margin-top: 20px;
    padding:6px 15px;
    border-radius: 8px;
    .academy_top {
      display: flex;
      justify-content: space-between;

      .academy_top_left{
        color: #0084FF;
        border-bottom: 2px solid #0084FF;
        width: 80px;
        line-height: 20px;
        text-align: center;
        div{
          font-size:16px;
        }
      }

      .academy_top_right{
        display: flex;
        button{
          width: 120px;
          margin-left: 30px;
          background: #1EB96B;
          border: #1EB96B;
        }
      }
    }

    /deep/.el-form {
        width: 100%;
        padding: 20px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        text-align: left;
        .el-form-item {
          margin-right:0px;
          margin-bottom:0px;
          

          .el-input__wrapper {
            height: 31px;
            // border-radius: 10px;
            // border: 1px solid #C5C5C5;
            // box-shadow:0 0 0 0;

            .el-input__inner {
              width:98px;
            }
  
            /deep/.el-input_suffix{
              position: absolute;
              left: 0;
            }
  
          }

          /deep/.el-form-item__content{
            /deep/.el-button{
              width:80px;
              background: #27B148;
              border: #27B148;
            }
          }

          
        }
    }

    /deep/.el-table{
      color:#666;
      .el-table__header{
        .el-table__cell{
          background:#E6F1FF;
          text-align: center;
        }
      }
      .el-table__body{
        .el-table__cell{
          text-align: center;
        }

      }

    }
    
    .academy_bottom{
      text-align: center;
        /deep/.el-pagination{
          justify-content: center;

          .is-first,.is-last,.number,.more {
            border: 1px solid #eee;
            background-color: transparent;
          }
          .is-active{
            background-color:transparent;
            color: #0084FF;
            border: 1px solid #0084FF;
            font-weight: 400;
          }
      }
    }


    .del{
      text-align: left;
      padding:15px 0;
      width:50px;
      cursor: pointer;
      p{
        color: black;
        font-size:12px; 
      }
    }
  }
}

/deep/.el-dialog__body {
  display: flex;
  justify-content: flex-start;
  .el-form {
    flex:1;
  
    .el-form-item {
      // width: 430px;
      .el-form-item__content  {
        width:300px;
        padding-left: 8px;
        .el-checkbox-group {
            font-size: 0;
            line-height: 0;
            display: flex;
            flex-wrap: wrap;
        }
      }
    }
  }
}

/deep/.el-row {
  width: 100%;
  margin-left: 0px!important;
  margin-right: 0px!important;
}
/deep/ .el-col {
  padding-left: 0px!important;
  padding-right: 0px!important;

  &:last-child {
    display: flex;
    justify-content: flex-end;
  }
}
/deep/.el-form-item__label {
  height: 40px;
  line-height: 40px;
}

/deep/ .el-col-16{
  justify-content: flex-start !important;
}

.row_two{
  margin-top:5px;
}

.checkInfo {
  /deep/.el-form-item__label {
    color:#999;
    font-weight:600;
  }
}

/deep/ .el-dialog {
  width:70%;
}
</style>

